<template>
    <div class="address_box">
        <header class="header">收货地址</header>
        <div class="content">
            <div class="item">
                <span>姓名</span>
                <input v-model="userName" type="text" placeholder="请填写真实姓名">
            </div>
            <div class="item">
                <span>手机号码</span>
                <input v-model="phone" type="text" placeholder="请输入手机号码">
            </div>
            <div class="item" @click="show=true">
                <span>所在地区</span>
                <input type="text" placeholder="请选择您的所在地区" v-model="address">
            </div>
            <div class="item">
                <span>详细地址</span>
                <input v-model="detailAddress" type="text" placeholder="街道、小区门牌等详细地址">
            </div>
        </div>

        <!-- 地区选择器（选择地址有问题，后期处理） -->
        <nut-picker v-model:visible="show" :columns="cascaderColumns" title="配送至" @confirm="confirm"></nut-picker>

        <!-- 设置默认地址 -->
        <div class="set_default">
            <div class="default_text">设为默认地址</div>
            <nut-switch v-model="checked" active-color="#c1ab96" />
        </div>
        <button class="finish">完成(2/2)</button>
        <button class="jump" @click="$router.push('/home')">跳过</button>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'addAddressView',
    data() {
        return {
            checked: false,
            show: false,
            userName: '',
            phone: '',
            address: '',
            detailAddress: '',
        }
    },
    methods: {
        confirm({ selectedValue, selectedOptions }) {
            console.log(selectedValue, selectedOptions)
            // 初次点击报错，没有北京这项数据
            let first = selectedOptions[0]
                ? selectedOptions[0].cityname
                : '北京'
            this.address = `${first}-${selectedOptions[1].cityname}-${selectedOptions[2].cityname}`
        },
    },
    computed: {
        // 从 vuex 获取地址列表
        ...mapState(['cascaderColumns']),
    },
    mounted() {
        this.$store.dispatch('getAddressList')
    },
}
</script>

<style lang="scss" scoped>
.address_box {
    background-color: #fff;
    height: 100vh;
}
.header {
    box-sizing: border-box;
    padding: 7.467vw 0 0 3.2vw;
    font-size: 5.867vw;
    font-weight: 700;
    height: 11vh;
    background-color: #c1ab96;
    color: #fff;
}
.content {
    width: 80vw;
    margin: 10.133vw auto 8.533vw auto;
    .item {
        position: relative;
        input {
            box-sizing: border-box;
            padding-left: 22.933vw;
            outline: 0;
            border: 0;
            width: 100%;
            height: 10.133vw;
            font-size: 3.733vw;
            color: #c1ab96;
            border-bottom: 0.267vw solid rgb(221, 221, 221);
            background-color: #fff;
            &:focus {
                border-color: #c1ab96;
            }
            &::placeholder {
                font-size: 3.2vw;
            }
        }
        span {
            position: absolute;
            top: 2.4vw;
            left: 1.333vw;
            font-size: 3.733vw;
        }
        &:nth-child(n + 2) {
            margin-top: 5.867vw;
        }
    }
}
.set_default {
    width: 80vw;
    padding: 0 2.667vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .default_text {
        font-size: 3.733vw;
    }
}
button {
    display: block;
    margin: 0 auto;
    width: 78vw;
    height: 11.2vw;
    border-radius: 5.6vw;
    border: 0;
}
.finish {
    margin: 40vw auto 2.667vw auto;
    color: #fff;
    background-color: #c1ab96;
}
.jump {
    color: #c1ab96;
    border: 0.267vw solid #c1ab96;
    background-color: #fff;
}
// 组件（选择器）不生效
::v-deep(.nut-picker-item) {
    color: #c1ab96;
}
</style>